<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="mvc" %>
<%@ include file="nav.jsp"%>
<%@ include file="logo.jsp"%>
<%@ include file="item.jsp"%>
<%@ include file="footer.jsp" %>
<rapid:override name="contentContainer"> 
<div class="container">
	<div class="row">
	
		<div class="col-xs-0 col-md-12 col-lg-12" style="margin-top:40px;">
			
			<div class="col-xs-12 col-md-3 col-lg-3 float-left">
				<form role="form">
					<div class="form-group">
						<select class="form-control" id="sortType" onchange="changeSortType(this)">
							 <option value="name">按名称排序</option>
							  <option value="price">按价格排序</option>
							  <option value="date">按日期排序</option>
							  <option value="hots">按热度排序</option>
						</select>
					</div>
				</form>
			</div>
			<div class="col-xs-12 col-md-3 col-lg-3 float-left">	
				<form role="form">
					<div class="form-group">
						<select class="form-control" id="showNum" onchange="changeShowNum(this)">
							 <option value="20">每页显示20</option>
							 <option value="30">每页显示30</option>
							  <option value="50">每页显示50</option>
							  <option value="60">每页显示60</option>
						</select>
					</div>
				</form>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="col-xs-12 col-md-12 col-lg-12 min-height" id="sassySmart">
			
		</div>
	 </div>
 </div>

</rapid:override>

<%@ include file="base.jsp" %>
<script type="text/javascript">
	var pageNum = 0
	var sortType = "name";
	var showNum = 20
 	window.onload= function(){
		pageNum = pageNum +1;
 		ajaxPOST(pageNum,sortType,showNum,'sassySmart');
 	}
 	
	function changeSortType(evt){
    	console.log(evt);
    	sortType = evt[evt.selectedIndex].value
    	ajaxPOST(pageNum,sortType,showNum,'sassySmart');
    };
    
    function changeShowNum(evt){
    	showNum = evt[evt.selectedIndex].value
    	ajaxPOST(pageNum,sortType,showNum,'sassySmart');
    };
    
	function ajaxPOST(page,sorttype,numperpage,pagetype){
 		document.getElementById("sassySmart").innerHTML=""
 		$.ajax({
 			url:"/pethub/sellData",
 			data:{'page':page,'sorttype':sorttype,'numperpage':numperpage,'pagetype':pagetype},
 			type:'POST',
 			success:function(data){
 				result = JSON.parse(data);
 				for (var i=0,length=result.length;i<length;i++){
					var image = ''
					for(var j=0,l=result[i]['itemID'].length;j<l;j++){
 						image += '<div><a href="javascript:void(0);" id="'+result[i]['itemID'][j]+'" onclick=selectitem(this) ><img src="'+result[i]['detailImageURL'][j]+'"/></a></div>'
 					}
 	 					
 					var boxdiv = document.createElement("div");
 					boxdiv.innerHTML = '<div class="items"><ul><li><img src="'+result[i]['detailImageURL'][0]+'" /></li><li>' + image +'</li><li><span>'+result[i]['itemDescription']+'</span></li><li><span>'+result[i]['itemPrice']+'</span></li>'+
 					'<li><a href="javascript:void(0);" onclick=addcar(this)>添加购物车</a></li></ul></div>'
 	 					
 					
					document.getElementById("sassySmart").append(boxdiv);
 				}
 			}
 		});
 	}
	function selectitem(obj){
		var pParent = obj.parentElement.parentElement;
		for(var i=0;i<pParent.children.length;i++){
		    pParent.children[i].classList.remove("sItem");
		    }
		obj.parentElement.classList.add("sItem");
		pParent.previousElementSibling.children[0].src = obj.children[0].src;
	}
	function addcar(obj){
		var pParent = obj.parentElement.parentElement
		var sitem = pParent.children[1]
		var sitemid = ""
		var sitemsrc = ""
		var sitemprice = obj.parentElement.previousElementSibling.children[0].innerText
		var sitemdesc = obj.parentElement.previousElementSibling.previousElementSibling.children[0].innerText
		for(var i=0;i<sitem.children.length;i++){
			if(sitem.children[i].className == "sItem"){
				sitemid = sitem.children[i].children[0].id;
				sitemsrc = sitem.children[i].children[0].children[0].src;
			}
		}
		
		
		if(sitemid != ""){
			var endOffsety = document.getElementsByClassName("petChartList")[0].getBoundingClientRect().top+150;
			var endOffsetx = document.getElementsByClassName("petChartList")[0].getBoundingClientRect().left+20;
			var startOffsetx = pParent.children[0].getBoundingClientRect().left;
			var startOffsety = pParent.children[0].getBoundingClientRect().top;
			
			$('<div class="flyImage"><img width="100%" height="100%" src="'+sitemsrc+'" /></div>').fly({
			      start: {top: startOffsety, left: startOffsetx},
			      end: {top: endOffsety, left: endOffsetx, width: 20, height: 20},
			      onEnd: function(){
			      	this.destroy();
			      }
			    });
			
			
			var nitem = document.createElement("li");
			nitem.innerHTML = '<img src="'+sitemsrc+'" id="'+sitemid+'"/><div><span>'+sitemprice+'</span><span>'+sitemdesc+'</span></div><a href="javascript:void(0);" onclick="removeItem(this)">删除</a>'
			var cars=document.getElementById("cars");
			cars.append(nitem);
			var totalprice = parseInt(cars.nextElementSibling.getAttribute("value"))+parseInt(sitemprice.substr(0,sitemprice.indexOf("元")));
			cars.nextElementSibling.setAttribute("value",totalprice);
			cars.nextElementSibling.text="结算(共"+totalprice+"元)";
			cars.nextElementSibling.style.cursor="pointer";
		}
		
	}
	function removeItem(obj){
		var pParent = obj.parentElement
		pParent.parentElement.removeChild(pParent);
		var cars=document.getElementById("cars");
		var price = obj.previousElementSibling.children[0].innerHTML;
		var totalprice = parseInt(cars.nextElementSibling.getAttribute("value"))-parseInt(price.substr(0,price.indexOf("元")));
		cars.nextElementSibling.setAttribute("value",totalprice);
		if(totalprice == 0){
			cars.nextElementSibling.text="请添加商品";
			cars.nextElementSibling.style.cursor="not-allowed";
		}
		else{
			cars.nextElementSibling.text="结算(共"+totalprice+"元)"
		}
		
		return false;
	}
	
	function rotateImage(obj){
		console.log(obj);
	}
	
	function unrotateImage(obj){
		console.log(obj);
	}
 </script>